<template>
  <div class="content">
    <!--    工序列表弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('menu.outsourcingList')"
      model
      :visible.sync="issupplierlDialog"
      :close-on-click-modal="false"
      width="60%"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <span class="materiel-code">{{ $t('market.processnumber') }}<!--工序名称--></span>
        <el-input v-model.trim="supplierPagination.fname" class="input-width" size="mini" placeholder="请输入客户名称" @keyup.enter.native="handleSupplier" />
        <el-button
          size="mini"
          type="primary"
          @click="handleSupplier"
        >
          {{ $t('btn.search') }}
        </el-button>
      </div>
      <div>
        <jc-table
          :table-data="supplierData"
          :table-header="supplierHeader"
          table-height="44vh"
          serial
          @clickRow="supplierSelectRow"
        />
      </div>
      <jc-pagination
        v-show="supplierPagination.total > 0"
        :total="supplierPagination.total"
        :page.sync="supplierPagination.pageNum"
        :limit.sync="supplierPagination.pageSize"
        @pagination="handleSupplier"
      />
    </el-dialog>
  </div>
</template>
<script>
import { queryWorkingNameList } from '@/api/workshop'

export default {
  data() {
    return {
      ftype: 11,
      fbillNo: 'fname', // 编码
      // 工序列表数据分页
      issupplierlDialog: true,
      // 工序分页
      supplierPagination: {
        total: 0,
        fname: '',
        pageNum: 1, // 当前页
        pageSize: 200 // 每页显示多少条数据
      },
      // 工序列表
      supplierData: [],
      // 工序表头
      supplierHeader: [
        { label: this.$t('market.processname'), prop: 'fnumber' },
        { label: this.$t('market.processnumber'), prop: 'fname' },
        { label: this.$t('market.note'), prop: 'fnote' },
        { label: this.$t('market.creator'), prop: 'fcreator' },
        { label: this.$t('market.createtime'), prop: 'fcreatedate' }
      ],
      prodValue: {}
    }
  },
  created() {
    this.handleSupplier()
  },
  methods: {
    // 获取工序
    async handleSupplier() {
      const { data: RES } = await queryWorkingNameList({
        ...this.supplierPagination,
        fforbidstatus: 'A',
        fdocumentstatus: 'C',
        search: this.searCollData
      })
      const { array, total } = RES
      this.supplierData = array
      this.supplierPagination.total = total
    },
    // 工序选中
    supplierSelectRow(item) {
      this.prodValue = item
      this.$emit('supplier', this.prodValue)
    },
    clientSearch() {
      this.supplierPagination.pageNum = 1
      this.queryTBdCustomerList()
    },
    // 关闭前回调
    handleClose() {
      this.$emit('supplier', this.prodValue)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
  .materiel-form {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-bottom: 5px;
    position: relative;

    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
    .confirm {
      transform: translateY(18%);
    }
    .materiel-code {
      font-weight: bold;
      font-size: 14px;
      color: #606266;
      line-height: 40px;
      padding: 0 12px 0 0;
    }

    .input-width {
      width: 185px;
      margin-right: 10px;
    }
  }
}
</style>
